<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>卫生分数排名</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">

      <div>
        <!--    功能区-->
        <div style="margin: 10px 0">
          <!--    搜索区-->
          <div style="margin: 10px 0">
            <el-date-picker
        v-model="selectedMonth"
        type="month"
        placeholder="选择月份"
        format="YYYY年MM月"
        value-format="YYYY-MM"
      />
      <el-button type="primary" @click="load" style="margin-left: 10px">
        搜索
      </el-button>
            
            
          </div>
        </div>


      
        <!--    表格-->
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          max-height="705"
          style="width: 100%"
        >
          <el-table-column label="#" type="index" />
          <el-table-column label="宿舍号" prop="room_id" sortable />
          <el-table-column label="日期" prop="month" />
          <el-table-column label="当月平均分数" prop="avg_score" />
   
          
          <!--      操作栏-->
          <el-table-column v-if="role != 'stu'" label="操作" width="130px">
            <template #default="scope">
              <el-button
                icon="Edit"
                type="primary"
                @click="handleEdit(scope.row)"
              ></el-button>
              <el-popconfirm
                title="确认删除？"
                @confirm="handleDelete(scope.row.id)"
              >
                <template #reference>
                  <el-button icon="Delete" type="danger"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
  <!-- 分页控件 -->
 <!-- <div style="margin-top: 20px; display: flex; justify-content: center">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->



        </div>
      </el-card>
  </div>
</template>
<script>
import request from "@/utils/request";

const { ElMessage } = require("element-plus");

export default {
    name: "CheckInfo",
    components: {},
    data() {
        return {
 // 新增分页相关数据
 currentPage: 1,
 pageSize: 10,  // 默认每页5条
      total: 0,
      allData: [], // 存储所有数据

            loading: true,
            disabled: false,
            judge: false,
            dialogVisible: false,
            search: "",
            selectedMonth:"",
            tableData: [],
            form: {},
            role:"",
            date:[],
        };
    },
  computed: {
        // 计算当前页显示的数据
        tableData() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.allData.slice(start, end);
        }
    },
    created() {
        this.selectedMonth = new Date().toISOString().slice(0, 7);
        this.role = JSON.parse(window.sessionStorage.getItem("identity"));
        this.load();
    },
    methods: {
        async load() {
            request.get("/check/avg",{
              params: {
                monthFilter:this.selectedMonth
              }  // 将参数附加到请求
            }).then((res) => {
                console.log(res);
                // 存储所有数据
                if(res.data[0].dorms!=null){
                  this.allData = res.data[0].dorms;
                }else {
                    ElMessage({
                        message: res.msg,
                        type: "error",
                    });
                }
                
                console.log("d",this.tableData);
                this.total= this.allData.length;
                this.loading = false;
            });
        },
        // 分页相关方法
    handleSizeChange(val) {
      this.pageSize = val;
      // 当每页条数改变时，重置到第一页
      this.currentPage = 1;
    },
    
    handleCurrentChange(val) {
      this.currentPage = val;
      // 当前页码改变时，computed属性会自动更新paginatedData
    },
        handleEdit(row) {
            //修改
            this.judge = true;
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.$refs.form.resetFields();
                // 生拷贝
                this.form = JSON.parse(JSON.stringify(row));
                this.disabled = true;
            });
        },
        async handleDelete(id) {
            console.log(id);
            request.delete("/check/delete/" + id).then((res) => {
                if (res.code === "0") {
                    ElMessage({
                        message: "删除成功",
                        type: "success",
                    });
                    this.search = "";
                    this.load();
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error",
                    });
                }
            });
        },
        handleSizeChange(pageSize) {
            //改变每页个数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(pageNum) {
            //改变页码
            this.currentPage = pageNum;
            this.load();
        },
    },
};


</script>